<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card>
        <div>
          <!-- 用一个行列布局  :span="20" 栅格布局24份-->
          <el-row
            type="flex"
            justify="space-between"
            align="middle"
            style="height: 40px"
          >
            <el-col :span="20">
              <span>江苏传智播客教育科技股份有限公司</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>负责人</el-col>
                <el-col>操作</el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <!-- 配置树形结构  :default-expand-all="true" 默认展开子级结构-->
        <el-tree :data="list" :props="defaultProps" :default-expand-all="true">
          <!-- 作用域插槽 data拿到的是每一个子节点的对象 -->
          <template #default="{ data }">
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              style="height: 40px; width: 100%"
            >
              <el-col :span="20">
                <!-- 从对象中拿到name属性渲染  -->
                <span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.manager }}</el-col>
                  <el-col>
                    <!-- 下拉菜单 element -->
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <el-dropdown-menu slot="dropdown">
                        <!-- 在vue中给一个组件写一个@click默认会识别为自定义事件 加上.native之后vue会帮助
                        我们给组件中的根元素绑定一个原生的click 这时候点击就会生效
                         -->
                        <!--el-button 不需要.native 因为button本身是按钮 组件内部已经绑定好了  -->
                        <el-dropdown-item
                          @click.native="addDepartment(data.id)"
                        >添加子部门</el-dropdown-item>
                        <el-dropdown-item @click.native="updateDepartment(data.id,'编辑')">编辑部门</el-dropdown-item>
                        <el-dropdown-item @click.native="delDepart(data.id)">删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>
    </div>
    <!-- 添加部门弹框 -->
    <el-dialog
      :title="str?'编辑部门':'新增部门'"
      :visible="showDialog"
      width="50%"
      @close="closeDialog"
      @open="openDialog"
    >
      <el-form ref="form" label-width="120px" :model="form" :rules="rules">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
        </el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
        </el-form-item>
        <el-form-item label="部门负责人" prop="manager">
          <!--
            key: 和v-for配合
            label 下拉时显示的中文文案
            value 选中某一项时自动绑定到 select v-model的数据
            通常这个value需要和后端交互作为接口数据提交给后端
           -->
          <el-select v-model="form.manager" style="width:80%" placeholder="--请选择--">
            <el-option
              v-for="item in managerList"
              :key="item.id"
              :label="item.username"
              :value="item.username"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce">
          <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" />

        </el-form-item></el-form>

      <span slot="footer">

        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="addOk()">{{ str?'编辑':'确定' }}</el-button>

      </span>

    </el-dialog>
  </div>
</template>

<script>
/*
  查
  1 根据接口文档准备api 封装
  2 在组件中导入 api函数
  3 在data中准备一个响应式 接收后台数据
  4 methods 中准备一个函数 在其中调用接口
  5 选择一个什么周期函数 调用4中的方法
 */
// 树形结构处理 1 找后台给他自己想要是结构 2 网上搜索方法

/**
 * 增
 * 1 实现一个弹框的打开关闭的交互效果
 * 2 实现的是一个表单校验 单个校验+兜底校验
 * 3 收集表单数据 确定提交接口
 * 4 提交成功之后的后续逻辑 提示用户 更新列表 重置数据 重置校验痕迹
 */
/**
 * 下拉列表
 * 1 封装接口 获取数据
 * 2 使用下拉框组件渲染到对应的位置
 */
import { getDepartments, getEmployeeSimple, addDepartment, delDepartment, getDepartmentDetails, updateDepartment } from '@/api'
import transTree from '@/utils/transTree'

export default {
  name: 'Departments',
  data () {
    // 如果后端给到我们的数据字段名称不叫label和children，我们也可以通过自定义配置去修改

    return {
      // 依赖一份树形数据
      list: [],
      // 修改属性为element 识别的属性
      defaultProps: {
        label: 'name', // 告诉组件去识别 名称为name的字段
        children: 'children'
      },
      // 控制添加部门弹框是否显隐
      showDialog: false,
      // 表单数据
      form: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      // 表单规则
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: ['blur', 'change'] }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: ['blur', 'change'] }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: ['blur', 'change'] }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: ['blur', 'change'] }
        ]
      },
      // 下拉菜单选项数据
      managerList: [],
      // 获取部门id
      curId: '',
      // 添加还是编辑标识
      str: '',
      // 编辑部门id
      id: ''
    }
  },
  mounted () {
    this.getDepartmentsList()
  },
  methods: {
    // 获取组织架构信息
    async getDepartmentsList () {
      try {
        const data = await getDepartments()
        // console.log(data.data.depts)
        this.list = transTree(data.data.depts)
      } catch (error) {
        console.log('获取组织架构列表失败')
      }
    },
    // 添加分部门点击事件
    addDepartment (id) {
      this.str = ''
      this.showDialog = true
      // 获取id
      this.curId = id
    },
    // 关闭弹框
    closeDialog() {
      this.showDialog = false
      this.$refs.form.resetFields()
      this.form = {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      }
    },
    // 弹框打开 发请求获取下拉数据
    async  openDialog() {
      const { data } = await getEmployeeSimple()
      // console.log(data)
      this.managerList = data
    },
    // 弹框确定 提交给后台数据
    async addOk() {
      try {
        await this.$refs.form.validate()
        if (!this.str) {
          // 添加部门
          const res = await addDepartment({
            ...this.form,
            pid: this.curId
          })
          this.$message.success(res.message)
        } else {
          // 编辑部门

          const res = await updateDepartment({ ...this.form, id: this.id })
          this.$message.success(res.message)
        }

        // console.log(res)

        // 获取部门列表数据
        this.getDepartmentsList()
        // 关闭弹窗
        this.closeDialog()
      } catch (error) {
        console.log(error)
      }
    },
    // 删除部门点击事件
    async delDepart(id) {
      try {
        await this.$confirm('真的要删除此部门吗?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // console.log(id)
        const res = await delDepartment(id)

        // console.log(11)
        if (res.code === 10000) {
          this.$message.success(res.message)
          // 更新部门数据
          this.getDepartmentsList()
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 编辑部门点击事件
    async updateDepartment(id, str) {
      this.str = str
      this.id = id
      // 获取部门详情
      const { data } = await getDepartmentDetails(id)
      // console.log(data)
      this.form = data
      this.showDialog = true
    }
  }
}
</script>

<style lang="scss" scoped></style>
